<template>
  <div class="bus-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1 class="page-title">
          总线管理
        </h1>
      </div>
      <div class="header-actions">
        <el-button type="success" icon="Plus">
          添加总线
        </el-button>
        <el-button type="primary" icon="Setting">
          总线配置
      </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="summary-cards">
      <div class="summary-card">
        <div class="card-content">
          <div class="card-value">9</div>
          <div class="card-label">总线协议数</div>
        </div>
      </div>
      <div class="summary-card">
        <div class="card-content">
          <div class="card-value">84</div>
          <div class="card-label">已配置设备</div>
        </div>
      </div>
      <div class="summary-card">
        <div class="card-content">
          <div class="card-value">78</div>
          <div class="card-label">活跃连接</div>
        </div>
      </div>
      <div class="summary-card">
        <div class="card-content">
          <div class="card-value">92%</div>
          <div class="card-label">协议覆盖率</div>
        </div>
      </div>
            </div>

    <!-- 协议管理网格 -->
    <div class="protocol-grid">
      <div class="protocol-card" v-for="protocol in protocols" :key="protocol.id">
        <div class="protocol-header">
          <div class="protocol-icon" :class="protocol.iconClass">
            <el-icon><component :is="protocol.icon" /></el-icon>
          </div>
          <el-tag type="success" size="small">活跃</el-tag>
        </div>
        <div class="protocol-content">
          <h3 class="protocol-name">{{ protocol.name }}</h3>
          <div class="protocol-stats">
            <span class="device-count">已连接设备: {{ protocol.deviceCount }}</span>
          </div>
          <p class="protocol-description">{{ protocol.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { 
  Connection, 
  Setting, 
  Plus,
  Cpu,
  Van,
  House,
  Lightning,
  OfficeBuilding,
  Link,
  Monitor,
  Location
} from '@element-plus/icons-vue'

// 协议数据
const protocols = ref([
  {
    id: 1,
    name: 'Modbus TCP/RTU',
    deviceCount: 18,
    description: '工业自动化标准通信协议',
    icon: 'Cpu',
    iconClass: 'modbus'
  },
  {
    id: 2,
    name: 'CAN Bus',
    deviceCount: 12,
    description: '车载网络通信协议',
    icon: 'Van',
    iconClass: 'can'
  },
  {
    id: 3,
    name: 'PROFINET',
    deviceCount: 8,
    description: '西门子工业以太网协议',
    icon: 'House',
    iconClass: 'profinet'
  },
  {
    id: 4,
    name: 'Ethernet/IP',
    deviceCount: 14,
    description: '罗克韦尔工业以太网协议',
    icon: 'OfficeBuilding',
    iconClass: 'ethernet-ip'
  },
  {
    id: 5,
    name: 'DNP3',
    deviceCount: 6,
    description: '分布式网络协议',
    icon: 'Lightning',
    iconClass: 'dnp3'
  },
  {
    id: 6,
    name: 'BACnet',
    deviceCount: 4,
    description: '楼宇自动化控制协议',
    icon: 'OfficeBuilding',
    iconClass: 'bacnet'
  },
  {
    id: 7,
    name: 'OPC UA',
    deviceCount: 10,
    description: '统一架构平台通信',
    icon: 'Link',
    iconClass: 'opc-ua'
  },
  {
    id: 8,
    name: 'Wireless Hart',
    deviceCount: 7,
    description: '无线高速可寻址协议',
    icon: 'Monitor',
    iconClass: 'wireless-hart'
  },
  {
    id: 9,
    name: 'ARINC 429',
    deviceCount: 5,
    description: '航空电子数据总线',
    icon: 'Location',
    iconClass: 'arinc-429'
  }
])

// 页面初始化
onMounted(() => {
  console.log('总线管理页面已加载')
})
</script>

<style lang="scss" scoped>
.bus-management {
  min-height: calc(100vh - 50px);
}

// 页面头部


  .header-left {
    .page-title {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0;
      color: var(--text-color);
      font-size: 28px;
      font-weight: 600;
    }
  }

  .header-actions {
    display: flex;
    gap: 10px;
  }


// 统计卡片
.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;

  .summary-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    .card-content {
      text-align: center;

      .card-value {
        font-size: 32px;
        font-weight: bold;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 8px;
      }

      .card-label {
        font-size: 14px;
        color: var(--text-color-secondary);
      }
    }
  }
}

// 协议管理网格
.protocol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;

  .protocol-card {
    background: var(--card-bg);
    border: var(--card-border);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    .protocol-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 15px;

      .protocol-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: white;

        &.modbus {
          background: linear-gradient(135deg, #5cb3ff, #3b82f6);
        }

        &.can {
          background: linear-gradient(135deg, #f87171, #ef4444);
        }

        &.profinet {
          background: linear-gradient(135deg, #4ade80, #10b981);
        }

        &.ethernet-ip {
          background: linear-gradient(135deg, #a855f7, #8b5cf6);
        }

        &.dnp3 {
          background: linear-gradient(135deg, #fbbf24, #f59e0b);
        }

        &.bacnet {
          background: linear-gradient(135deg, #6b7280, #4b5563);
        }

        &.opc-ua {
          background: linear-gradient(135deg, #f97316, #ea580c);
        }

        &.wireless-hart {
          background: linear-gradient(135deg, #22c55e, #16a34a);
        }

        &.arinc-429 {
          background: linear-gradient(135deg, #3b82f6, #2563eb);
        }
      }
    }

    .protocol-content {
      .protocol-name {
        margin: 0 0 10px 0;
        color: var(--text-color);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.3;
      }

      .protocol-stats {
        margin-bottom: 10px;

        .device-count {
          font-size: 14px;
          color: var(--text-color-secondary);
          font-weight: 500;
        }
      }

      .protocol-description {
  margin: 0;
        font-size: 12px;
        color: var(--text-color-secondary);
        line-height: 1.4;
      }
    }
  }
}

// 响应式适配
@media (max-width: 1200px) {
  .summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .protocol-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;

    .header-actions {
  width: 100%;
      justify-content: flex-start;
    }
  }

  .summary-cards {
    grid-template-columns: 1fr;
  }

  .protocol-grid {
    grid-template-columns: 1fr;
  }
}
</style>